<!-- The actual content of the page -->
<div class="content">
    {$MESSAGE}
</div>
<div class="content" id="main_content">
    <h1>Options</h1>
    <form method="post" name="options_form" id="modalForm" action="{$RELPATH}/user_options">
        <table id="mytable" cellspacing="0">
            <caption>Select your preferences</caption>
            <tr>
                <th scope="col" class="nobg" width="40%">User options</th>
                <th scope="col" ></th>
            </tr>
            <tr>
                <th scope="row" class="spec">Date format:</th>
                <td>
                    {html_options name=option_dateformat output=$DATEFORMATS values=$DATEFORMATS selected=$CURRENT_DATEFORMAT}
                </td>
            </tr>
        </table>
        <input type="hidden" name="user_options" value="1">
        <!--<input type="submit">-->
        <a onclick="send_ajax();"><img src="{$TEMPLATE_PATH}/images/icons/32/accept.png" title="Save"></a>
    </form>
</div>
<script type="text/javascript">
    /*
     * Submit this form through ajax
     */
    function send_ajax(){

        $.ajax({
            type: $('#modalForm').attr('method'),
            url: $('#modalForm').attr('action'),
            data: $('#modalForm').serialize(),
            beforeSend: function(){
                $.blockUI({ css: {
                        border: 'none',
                        padding: '15px',
                        backgroundColor: '#000',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                        opacity: .5,
                        color: '#fff',font:'30px'

                    } });
            },
            success: function() {
                $.unblockUI();
            }
        });
    }
</script>